<template>
    <div class="w1200 hospital_page">

        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}商城</el-breadcrumb-item>
                <!-- <el-breadcrumb-item>商城</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 筛选区域 开始 -->
        <div class="filter_box">
            <div class="cell_box">
                <div class="name">口腔项目：</div>
                <div class="list_box">
                    <nuxt-link class="cell" :class="projectId == '' ? 'cell_active' : ''" :to="`/shop?projectId=&combinedId=${combinedId}`" replace>全部</nuxt-link>
                    <!-- <div class="cell" :class="projectId == '' ? 'cell_active' : ''" @click="searchHospital('', 'titleId')">全部
                    </div> -->
                    <!-- <div class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`type_${index}`" @click="searchHospital(item.id, 'projectId')">{{ item.name }}</div> -->
                    <nuxt-link class="cell" :class="projectId == item.id ? 'cell_active' : ''" :to="`/shop?projectId=${item.id}&combinedId=${combinedId}`" v-for="(item, index) in projectList" :key="`type_${index}`" replace>{{ item.name }}</nuxt-link>
                </div>
            </div>
            <div class="cell_box">
                <div class="name">排序规则：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="combinedId == '' ? 'cell_active' : ''" @click="searchHospital('', 'projectId')">
                        全部</div> -->
                        <nuxt-link class="cell" :class="combinedId == '' ? 'cell_active' : ''" :to="`/shop?projectId=${projectId}&combinedId=`" replace>全部</nuxt-link>
                    <!-- <div class="cell" :class="combinedId == item.value ? 'cell_active' : ''" v-for="(item, index) in combinedList" :key="`type_${index}`" @click="searchHospital(item.value, 'combinedId')">{{ item.text }}
                    </div> -->
                    <nuxt-link class="cell" :class="combinedId == item.value ? 'cell_active' : ''" :to="`/shop?combinedId=${item.value}&projectId=${projectId}`" v-for="(item, index) in combinedList" :key="`combinedId_${index}`" replace>{{ item.text }}</nuxt-link>
                </div>
            </div>
        </div>
        <!-- 筛选区域 end -->

        <!-- 申请 开始 -->
        <Settlement />
        <!-- 申请 end -->

        <!-- 内容 开始 -->
        <div class="content">
            <!-- 左侧医生列表 开始 -->
            <div class="left_box">

                <!-- 列表 开始 -->
                <div class="hospital_list">
                    <template v-if="goodsList && goodsList.length">
                        <div class="list_doctor" v-for="(item, index) in goodsList" :key="`goods_${index}`">
                            <Goods :info="item" />
                        </div>
                        <template v-if="goodsList.length % 4">
                            <div class="hidden_cell" v-for="(hitem, idx) in (4 - (goodsList.length % 4))" :key="`hi_${idx}`">
                            </div>
                        </template>
                    </template>
                </div>
                <!-- 列表 end -->

                <!-- 分页 开始 -->
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :page-size="12" :current-page="pageNumber" :total="total" @current-change="changePage">
                    </el-pagination>
                </div>
                <!-- 分页 end -->

            </div>
            <!-- 左侧医生列表 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 附近医院 开始 -->
                <div class="problem_box">
                    <div class="head">附近医院</div>
                    <div class="list_box">
                        <Hospital v-for="(item, index) in hospitalList" :key="`hospital_${index}`" :info="item" :logo="$getLogo(item.surroundingsPics)" />
                    </div>
                </div>
                <!-- 附近医院 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->



    </div>
</template>
<script>
import { PLATFORM_TYPE,GET_HOSPITAL_PROJECT_OPTIONS, GET_GOODS_SEARCH, GET_HOSPITAL_SEARCH,GET_SEO_SETTING_INFO } from '@/http/interface'
import qs from 'qs';
import Settlement from '@/components/apply/index.vue'
import Goods from '@/components/goods/index.vue'
import Hospital from '@/components/hospital/index.vue';
export default {
    components: {
        Goods,
        Settlement,
        Hospital
    },
    data() {
        return {
            projectList: [],
            combinedList: [
                { text: "价格排序", value: 1 },
                { text: "销量排序", value: 2 },
            ],
            combinedId: '',
            projectId: '',
            form: {},
            goodsList: [],
            total: 0,
            pageNumber: 1,
            hospitalList: [],
            seoInfo: {}
        }
    },
    head() {
        return {
            title: this.seoInfo.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.seoInfo.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.seoInfo.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/shop`
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/shop`}
      ]
        };
    },
    watchQuery: true,
    async asyncData({ query, $axios,$cookies }) {
        let pageNumber = Number(query.pageNumber || 1);

        // 擅长项目
        let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
        let projectList = pro.data || []

        // 商品列表
        let params = { pageSize: 12 }
        params.pageNumber = pageNumber
        params.combinedId = query.combinedId
        params.projectId = query.projectId
        if($cookies.get('city') && $cookies.get('city') != '全国'){
            params.city = $cookies.get('city')
        }
        let hes = await $axios.get(GET_GOODS_SEARCH, { params: params })
        let obj = hes.data || {}
        let goodsList = obj.list || []
        console.log(goodsList)

        // 医院列表
        let qes = await $axios.get(GET_HOSPITAL_SEARCH, { params: { pageNumber: 1, pageSize: 4 } })
        let qbj = qes.data || {}
        let hospitalList = qbj.list || []

        // 获取seo配置
        let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 3, platform: PLATFORM_TYPE } })
        let seoInfo = seo.data || {}

        return {
            projectList,
            goodsList,
            total: obj.totalElements,
            pageNumber,
            combinedId: query.combinedId || '',
            projectId: query.projectId || '',
            hospitalList,
            seoInfo
        }
    },
    methods: {
        // 切换分页
        changePage(e) {
            this.pageNumber = e;
            this.navigateToPage()
        },

        // 切换筛选条件
        searchHospital(e, id) {
            this[id] = e
            this.navigateToPage()
        },

        // 切换路由
        navigateToPage() {
            let query = this.$route.query
            let o = { pageNumber: this.pageNumber }
            if (this.combinedId) {
                o.combinedId = this.combinedId
            }
            if (this.projectId) {
                o.projectId = this.projectId
            }
            o.random = Math.random()
            let _path = `/shop?${qs.stringify(o)}`
            this.$router.replace({
                path: _path
            })
            //this.$routerReplace(o)
        },
    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/shop.less';
</style>